<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云笔记详情 | 优雅笔记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #818cf8;
            --accent-color: #f5f3ff;
            --text-color: #1e293b;
            --light-text: #475569;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: var(--text-color);
        }

        .note-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .note-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12);
        }

        .edit-mode .view-content {
            display: none;
        }

        .edit-mode .edit-content {
            display: block;
        }

        .edit-content {
            display: none;
        }

        .icon-btn {
            @apply p-2 rounded-full hover:bg-gray-100 transition-colors;
        }

        /* 修复：移除所有@apply指令，改用直接类名 */
        .btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }

        .btn-primary {
            background-color: #6366f1;
            color: white;
        }

        .btn-primary:hover {
            background-color: #4f46e5;
        }

        .btn-secondary {
            background-color: #f3f4f6;
            color: #475569;
        }

        .btn-secondary:hover {
            background-color: #e5e7eb;
        }

        .input-field {
            @apply w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-300 focus:border-indigo-500 outline-none;
        }

        .textarea-field {
            @apply w-full px-4 py-3 border border-gray-200 rounded-lg font-mono resize-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-500 outline-none;
        }
    </style>
</head>

<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <!-- 顶部装饰元素 -->
        <div
            class="absolute top-0 left-0 w-full h-64 bg-gradient-to-r from-indigo-500 to-purple-600 opacity-10 -z-10 rounded-b-3xl">
        </div>

        <!-- 返回按钮 -->
        <div class="mb-8">
            <button id="backButton"  class="flex items-center text-gray-600 hover:text-indigo-600 group ">
                <i class="fas fa-arrow-left mr-2 text-lg group-hover:-translate-x-1 transition-transform"></i>
                <span class="font-medium">返回笔记列表</span>
            </button>
        </div>

        <!-- 笔记卡片 -->
        <div class="note-card overflow-hidden">
            <!-- 卡片顶部装饰 -->
            <div class="h-3 bg-gradient-to-r from-indigo-500 to-purple-600"></div>

            <div class="p-8">
                <!-- 标题和操作区 -->
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <!-- 后端补充文章标题 -->
                        <h1 id="noteTitle" class="text-2xl md:text-3xl font-bold text-gray-800 tracking-tight">
                        </h1>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <i class="far fa-calendar-alt mr-1"></i>

                            <!-- 后端补充日期 -->
                            <span id="createdAt"></span>

                        </div>
                    </div>

                    <div class="flex space-x-3">
                        <button id="editButton" class="icon-btn text-gray-600 hover:text-indigo-600">
                            <i class="fas fa-edit text-lg"></i>
                        </button>
                        <button id="saveButton" class="icon-btn text-green-600 hidden hover:text-green-700">
                            <i class="fas fa-save text-lg"></i>
                        </button>
                    </div>
                </div>

                <!-- 详情内容（查看模式） -->
                <div id="viewContent" class="view-content">
                    <!-- 后端补充 -->
                    <div class="details">
                        
                    </div>
                </div>

                <!-- 编辑内容（编辑模式） -->
                <div id="editContent" class="edit-content">
                    <h1>编辑页面</h1>
                </div>

                <!-- 底部操作栏 -->
                <div class="flex justify-end space-x-3 pt-6 border-t border-gray-100">
                    <button id="cancelEdit" class="btn btn-secondary hidden">取消</button>
                    <button id="confirmEdit" class="btn btn-primary hidden">确认修改</button>
                </div>
            </div>
        </div>
    </div>


    <script src="./jquery-3.7.1.min.js"></script>
    <script src="./js/common.js"></script>
    <script>

        // 详情
        $.ajax({
            type: "get",
            url: "/blog/getBlogDetails"+location.search,
            success: function(reslut){
                if(reslut != null && reslut.code == 200 && reslut.data != null){
                    let blog = reslut.data;
                    $("#noteTitle").text(blog.title);
                    $("#createdAt").text(blog.createTime);
                    $("#viewContent .details").text(blog.content)
                }
            }

        });







        document.addEventListener('DOMContentLoaded', function () {
            const editButton = document.getElementById('editButton');
            const saveButton = document.getElementById('saveButton');
            const cancelEdit = document.getElementById('cancelEdit');
            const confirmEdit = document.getElementById('confirmEdit');
            const backButton = document.getElementById('backButton');
            const noteCard = document.querySelector('.note-card');

            // 直接使用Tailwind类名替代@apply
            editButton.className = 'p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600 hover:text-indigo-600';
            saveButton.className = 'p-2 rounded-full hover:bg-gray-100 transition-colors text-green-600 hidden hover:text-green-700';
            cancelEdit.className = 'btn btn-secondary hidden px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors';
            confirmEdit.className = 'btn btn-primary hidden px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors';

            // 切换编辑模式
            editButton.addEventListener('click', function () {
                noteCard.classList.add('edit-mode');
                editButton.classList.add('hidden');
                saveButton.classList.remove('hidden');
                cancelEdit.classList.remove('hidden');
                confirmEdit.classList.remove('hidden');
            });

            // 保存笔记
            saveButton.addEventListener('click', function () {
                const newTitle = document.getElementById('editTitle').value;
                const newContent = document.getElementById('editContentText').value;

                // 更新显示内容
                document.getElementById('noteTitle').textContent = newTitle;

                // 这里应该使用DOMParser将HTML内容转换为安全格式
                // 简化处理：直接替换文本内容（实际项目中需要安全处理）
                const viewContent = document.getElementById('viewContent').querySelector('.prose');
                viewContent.innerHTML = newContent.replace(/\n\n/g, '</p><p class="text-gray-700 leading-relaxed mb-5">')
                    .replace(/^(1\. .*?)(?=\n\n|$)/gm, '<h2 class="text-xl font-semibold text-gray-800 mb-3 mt-6">$1</h2>')
                    .replace(/^(```.*?```)/gm, '<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto">$1</pre>')
                    .replace(/^<div style="[^"]*">([\s\S]*?)<\/div>/gm, '<div class="bg-indigo-50 p-4 rounded-lg mb-5">$1</div>')
                    .replace(/<i class="fas fa-lightbulb" style="[^"]*"><\/i>/g, '<i class="far fa-lightbulb mr-2"></i>');

                noteCard.classList.remove('edit-mode');
                editButton.classList.remove('hidden');
                saveButton.classList.add('hidden');
                cancelEdit.classList.add('hidden');
                confirmEdit.classList.add('hidden');

                console.log('笔记已保存:', { title: newTitle, content: newContent });
            });

            // 取消编辑
            cancelEdit.addEventListener('click', function () {
                noteCard.classList.remove('edit-mode');
                editButton.classList.remove('hidden');
                saveButton.classList.add('hidden');
                cancelEdit.classList.add('hidden');
                confirmEdit.classList.add('hidden');
            });

            // 返回按钮
            backButton.addEventListener('click', function () {
                // alert('返回笔记列表（实际项目中会跳转页面）');
                location.href="index.html";
            });
        });
    </script>
</body>

</html>